<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card shadow="hover">
            <!-- 搜索区域 -->
            <!-- 用不了 只能搜出来所有的数据 -->
            <!-- <el-row>
                <el-col :span="8">
                    <el-input v-model="queryInfo.query" placeholder="请输入内容" clearable @clear="getOrdersList">
                        <el-button slot="append" icon="el-icon-search" @click="getOrdersList"></el-button>
                    </el-input>
                </el-col>
            </el-row> -->

            <!-- table 订单列表数据 -->

            <el-table :data="orderList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="订单编号" prop="order_number"></el-table-column>
                <el-table-column label="订单价格" prop="order_price"></el-table-column>

                <el-table-column label="是否付款" prop="order_pay">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.order_pay==='0'" type="danger">未付款</el-tag>
                        <el-tag v-else-if="scope.row.order_pay === '1'" type="primary">支付宝</el-tag>
                        <el-tag v-else-if="scope.row.order_pay === '2'" type="success">微信支付</el-tag>
                        <el-tag v-else type="info">银行卡</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="是否发货" prop="is_send">
                </el-table-column>
                <el-table-column label="下单时间" prop="create_time">
                    <template v-slot="scope">
                        {{scope.row.create_time | dataFormat}}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="70px">
                    <template v-slot="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                            @click="showOrderEditDialog(scope.row)"></el-button>
                        <!-- <el-button type="success" icon="el-icon-location" size="mini"
                            @click="showProgressBox"></el-button> -->
                    </template>
                </el-table-column>
                <!-- 
                    page-size	    每页显示条目个数
                    current-page	当前页数
                    page-sizes	    每页显示个数选择器的选项设置
                    total	        总条目数
                    size-change	    pageSize 改变时会触发	
                    current-change	currentPage 改变时会触发
                -->
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="this.queryInfo.pagenum" :page-sizes="[5, 10, 15, 30]"
                :page-size="this.queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>


        <!-- 修改订单信息对话框 -->
        <el-dialog title="修改订单" :visible.sync="orderDialogVisible" width="50%">
            <el-form :model="editOrderForm" :rules="editOrderFormRules" ref="editOrderFormRef" label-width="100px">
                <el-form-item label="订单价格" prop="order_price">
                    <el-input v-model="editOrderForm.order_price"></el-input>
                </el-form-item>
                <el-form-item label="是否发货" prop="is_send">

                    <el-radio-group v-model="editOrderForm.is_send">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="是否付款" prop="order_pay">
                    <el-radio-group v-model="editOrderForm.order_pay">
                        <el-radio label="0">未付款</el-radio>
                        <el-radio label="1">支付宝</el-radio>
                        <el-radio label="2">微信支付</el-radio>
                        <el-radio label="3">银行卡</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="orderDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editOrderInfo">确 定</el-button>
            </span>
        </el-dialog>

    </div>

</template>

<script>

    export default {
        name: 'Orders',
        data() {
            return {
                queryInfo: {
                    query: '',
                    pagenum: 1,
                    pagesize: 5,
                },
                total: 0,
                orderList: [],

                // 控制修改订单对话框的显示与隐藏
                orderDialogVisible: false,
                // 修改订单信息
                editOrderForm: {
                    order_id: '',
                    order_price: 0,
                    is_send: '0',
                    pay_status: 0,
                    order_pay: '0'
                },
                editOrderFormRules: {
                    order_price: [
                        { required: true, message: '请输入订单价格', trigger: 'blur' }
                    ],
                    is_send: [
                        { required: true, message: '请确认是否发货', trigger: 'blur' }
                    ],
                    order_pay: [
                        { required: true, message: '请确认是否付款', trigger: 'blur' }
                    ]
                }


            }
        },
        created() {
            this.getOrdersList()
        },
        methods: {
            async getOrdersList() {
                // console.log(this.queryInfo.query);

                const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
                // console.log(res);
                if (res.meta.status !== 200) return this.$message.error('获取订单数据列表失败')
                // console.log(res.data);
                this.orderList = res.data.goods
                // console.log(this.orderList);
                this.total = res.data.total

            },
            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getOrdersList()
            },
            // 监听 pagenum 改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                this.getOrdersList()
            },
            // 修改订单
            async showOrderEditDialog(row) {
                // console.log(row.order_id);
                const { data: res } = await this.$http.get(`orders/${row.order_id}`)
                // console.log(res);
                // console.log(res.data.is_send);
                if (res.data.is_send == "是") {
                    res.data.is_send = "1"
                } else {
                    res.data.is_send = "0"
                }
                this.editOrderForm = res.data
                // console.log(this.editOrderForm);
                this.orderDialogVisible = true
            },

            // 提交修改订单信息
            editOrderInfo() {
                this.$refs.editOrderFormRef.validate(async valid => {
                    if (!valid) return
                    // console.log(this.editOrderForm);
                    const { data: res } = await this.$http.put(`orders/${this.editOrderForm.order_id}`, this.editOrderForm, { params: { is_send: this.editOrderForm.is_send } })
                    if (res.meta.status !== 201) return this.$message.error('修改订单信息失败')
                    this.$message.success('修改订单信息成功')
                    this.getOrdersList()
                    // console.log(res);
                    this.orderDialogVisible = false
                })
            }




        }
    }
</script>

<style scoped>
    .el-cascader {
        width: 100%;
    }
</style>